import { IGlobalState } from '@/store';
import { SET_CURRENT_NEWS } from '@/store/detail/actionTypes';
import { INewsInfo } from '@/typings';
import { computed } from 'vue';
import { RouteLocationNormalizedLoaded } from 'vue-router';
import { Store } from 'vuex';

/**
 * 获取详情页当前新闻信息数据
 * @param store 仓库
 * @param route 路由对象
 * @returns 新闻信息数据
 */
function useDetailInfo(
  store: Store<IGlobalState>,
  route: RouteLocationNormalizedLoaded
): INewsInfo | undefined {
  //http://localhost:8080/detail/65b84225304577130e90caf410f5af68/Home
  //http://localhost:8080/detail/:uniquekey/:pageFrom
  //新闻的唯一key
  const uniquekey: string = route.params.uniquekey as string;
  //跳转详情页来源页面名称
  const pageFrom: string = route.params.pagefrom as string;

  // console.log(uniquekey);
  //5e7d569750b58af2e1e73e05337126b8
  // console.log(pageFrom);
  //Home

  //从收藏页过来的吗？
  const newsData: INewsInfo[] =
    pageFrom === 'MyNews'
      ? //是
        JSON.parse(localStorage.getItem('newsList') || '[]')
      : //不是
        store.state.home.newsList.news;

  //拿到newsData后,遍历,用uniquekey对比每一项的uniquekey,相等则取出
  const newsInfo: INewsInfo | undefined = newsData.find(
    (item: INewsInfo) => item.uniquekey === uniquekey
  );

  //设置当前新闻信息
  store.dispatch(`detail/${SET_CURRENT_NEWS}`, newsInfo);

  return newsInfo;
}

/**
 * 该函数的作用:
 * 1. 对当前的新闻详情里的喜欢按钮进行点击切换 收藏/取消收藏
 * 2. 收藏时会收集当前的新闻对象 并缓存至localStorage里的newsList字段, 且更改图标样式为收藏的样式
 * 3. 取消收藏时会从localStorage里的newsList字段里删除当前的新闻对象, 且更改图标样式为非收藏的样式
 * @param store 仓库
 * @param callback(status) 回调 最终执行callback里定义的程序
 * @param status 是否为收藏的状态
 */
function useNewsFollow(
  store: Store<IGlobalState>,
  callback: (status: boolean) => void
): void {
  //获取detail里state的currentNews对象数据
  const currentNews: INewsInfo = computed(
    () => store.state.detail.currentNews
  ).value;

  /**
   * console.log('currentNews:', currentNews);
   * {uniquekey: 'f0a6ab2d002fc6c18c56627f6c48ddb3', title: '浙江累计实现人体器官捐献1932例 挽救近6000条生命', date: '2022-03-30 20:26:00', category: '头条', author_name: '人民资讯', …}
   */

  //获取localStorage里缓存的newsList字段的数据
  //业务情况是:
  //1.newsList字段缓存许多收藏过的新闻信息对象
  //2.从未有过收藏时newsList字段会是空数组
  //参考：收藏时保存的值为[{"uniquekey":"09020ec642d93d6c16fa79de07adfd7b","title":"11家保险公司已向东航飞行事故遇难人员家属赔款1485万元","date":"2022-03-30 19:58:00","category":"头条","author_name":"人民资讯","url":"https://mini.eastday.com/mobile/220330195845757342837.html","thumbnail_pic_s":"","is_content":"1"}]
  let newsList: INewsInfo[] = JSON.parse(
    localStorage.getItem('newsList') || '[]'
  );

  //是否为收藏的状态,默认值为false
  let followStatus: boolean = false;

  //newsList[]记录了多项点击收藏的新闻详情信息
  //当newsList[{...},{...},{...}]有内容时存在两种情况:
  //1.里面某一项新闻新对象恰好是收藏的那一项对象
  //2.里面没有收藏的那一项对象
  if (newsList.length) {
    //find -> 返回符合uniquekey条件的那一项对象
    //说明isExist有可能是空也有可能是当前的新闻信息对象
    const isExist: INewsInfo | undefined = newsList.find(
      (item: INewsInfo) => item.uniquekey === currentNews.uniquekey
    );

    /**
     * console.log(isExist);
     * {uniquekey: 'f0a6ab2d002fc6c18c56627f6c48ddb3', title: '浙江累计实现人体器官捐献1932例 挽救近6000条生命', date: '2022-03-30 20:26:00', category: '头条', author_name: '人民资讯', …}
     */

    //当isExist不是undefind且是当前新闻对象时
    if (isExist) {
      //过滤掉不符合条件的那一项 其余符合条件的项放入新数组newsList
      newsList = newsList.filter(
        (item: INewsInfo) => item.uniquekey !== currentNews.uniquekey
      );

      // console.log('filter:', newsList);
      //打印的都是筛选后的项(里面并没有当前新闻信息)

      //没有当前新闻信息说明是没收藏,将状态设为未收藏
      followStatus = false;
    } else {
      //isExist是undefind时说明没有当前的新闻信息
      //将当前新闻信息放入newsList数组里
      newsList.unshift(currentNews);

      //将其设为收藏成功状态
      followStatus = true;
    }
  } else {
    //localStorage里newsList字段
    newsList.unshift(currentNews);
    //收藏成功
    followStatus = true;
  }

  //将处理好的newsList数组存入localStorage
  localStorage.setItem('newsList', JSON.stringify(newsList));

  //执行回调里的更改图标样式程序
  callback(followStatus);
}

/**
 * 检查判断当前路由显示的新闻详情页面是否为收藏页面
 * 1. 如果是收藏页面返回收藏的状态
 * 2. 如果非收藏页面返回非收藏的状态
 * @param route 路由对象
 * @param callback(status) 回调 最终执行callback里定义的程序
 * @param status 是否为收藏的状态
 */
function useFollowCheck(
  route: RouteLocationNormalizedLoaded,
  callback: (status: boolean) => void
): void {
  //从路由对象中获取当前访问的新闻详情页面的uniquekey
  const uniquekey = route.params.uniquekey;
  //从路由对象中获取当前访问的新闻详情页面的页面来源
  const pageFrom = route.params.pagefrom;

  // console.log(uniquekey);
  //e1d888dc5996fecc662d3b3e560cac16 Home

  //从收藏页面过来时
  if (pageFrom === 'MyNews') {
    //收藏状态肯定是true
    callback(true);
    return;
  }

  //从其他页面过来时
  //获取newsList字段内容
  const newsList: INewsInfo[] = JSON.parse(
    localStorage.getItem('newsList') || '[]'
  );

  //如果当前页面的新闻详情uniquekey和localStorage里newsList字段某一项收藏的新闻信息里uniquekey一致时
  //说明当前页面是收藏页面
  const isExist: INewsInfo | undefined = newsList.find(
    (item: INewsInfo) => item.uniquekey === uniquekey
  );

  //给回调传递参数
  callback(isExist ? true : false);
}

export { useDetailInfo, useNewsFollow, useFollowCheck };
